<template>
  <el-drawer v-model="state.visible" title="编辑" :size="1200" :with-header="false">
    <el-tabs v-model="state.activeName" @tab-click="handleClick">
      <el-tab-pane v-for="info in state.fileTypeList" :label="info.label" :name="info.label">
        <article v-highlight v-html="state.content"></article>
        <el-button class="clipboard-btn" type="primary" text bg @click="copyHandle($event)">复制</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import {ElMessage, TabsPaneContext} from 'element-plus/es'
import {useTablePreviewApi} from '@/api/table'
import {marked} from "marked";
import {IPreviewOptions} from "@/types/generator";
import Clipboard from "clipboard";
import {useTemplateFileListByGroupId} from "@/api/templateFile";
import {Option} from "@/types/common";

/**
 * tab 页点击
 * @param tab tab 页
 */
const handleClick = (tab: TabsPaneContext) => {
  state.activeName = tab.paneName as string
  previewByType()
}

const emit = defineEmits(['refreshDataList'])
const sortable = ref() as any

const fieldList = ref([])
const fillList = reactive([
  {label: 'DEFAULT', value: 'DEFAULT'},
  {label: 'INSERT', value: 'INSERT'},
  {label: 'UPDATE', value: 'UPDATE'},
  {label: 'INSERT_UPDATE', value: 'INSERT_UPDATE'}
])

const queryList = reactive([
  {label: '=', value: '='},
  {label: '!=', value: '!='},
  {label: '>', value: '>'},
  {label: '>=', value: '>='},
  {label: '<', value: '<'},
  {label: '<=', value: '<='},
  {label: 'like', value: 'like'},
  {label: 'left like', value: 'left like'},
  {label: 'right like', value: 'right like'}
])

const formTypeList = reactive([
  {label: '单行文本', value: 'text'},
  {label: '多行文本', value: 'textarea'},
  {label: '富文本编辑器', value: 'editor'},
  {label: '下拉框', value: 'select'},
  {label: '单选按钮', value: 'radio'},
  {label: '复选框', value: 'checkbox'},
  {label: '日期', value: 'date'},
  {label: '日期时间', value: 'datetime'}
])

// 状态
const state: IPreviewOptions = reactive({
  visible: false,
  datasourceId: '',
  projectId: '',
  groupId: '',
  tableName: '',
  activeName: 'entity',
  content: '',
  source: '',
  fileTypeList: [],
})

// 初始化
const init = async (datasourceId: string | number, projectId: string | number,
                    groupId: string | number, tableName: string) => {
  // 设置可见
  state.visible = true
  // 设置数据源
  state.datasourceId = datasourceId
  // 设置工程 ID
  state.projectId = projectId
  // 设置表名
  state.tableName = tableName
  // 根据模板组 ID 获取模板文件列表
  await useTemplateFileListByGroupId(groupId).then(res => {
    // 文件类型列表
    state.fileTypeList = res.data
    // 默认激活的 panel 页
    state.activeName = state.fileTypeList[0].label
  })
  previewByType()
}

/**
 * 根据类型预览
 */
const previewByType = () => {
  // 清空数据
  state.content = ''
  state.source = ''
  // 文件类型
  let fileInfo: Option;
  // 遍历查询 fileType
  for (let i = 0; i < state.fileTypeList.length; i++) {
    const info = state.fileTypeList[i]
    if (info.label === state.activeName) {
      fileInfo = info
      break
    }
  }
  useTablePreviewApi({
    datasourceId: state.datasourceId,
    projectId: state.projectId,
    tableName: state.tableName,
    templateFileId: fileInfo!!.value
  }).then(res => {
    const data = res.data
    state.source = data.content
    state.content = marked.parse(
        '```' + data.type + '\n' +
        data.content +
        '\n```'
    )
  })
}

// 赋值内容
const copyHandle = (e: PointerEvent) => {
  // 剪贴板
  const clipboard = new Clipboard(e.currentTarget as any,{
    action: () => 'copy',
    text: () => state.source
  })
  // 成功
  clipboard.on('success', () => {
    ElMessage.success('复制成功')
    clipboard.destroy()
  })
  // 异常
  clipboard.on('error', () => {
    ElMessage.success('复制失败')
    clipboard.destroy()
  })
}

defineExpose({
  init
})
</script>

<style lang="scss">
.sortable-row-gen .drag-btn {
  cursor: move;
  font-size: 12px;
}

.vxe-select--panel {
  position: fixed !important;
  min-width: 10% !important;
  left: auto !important;
}

.sortable-row-gen .vxe-body--row.sortable-ghost,
.sortable-row-gen .vxe-body--row.sortable-chosen {
  background-color: #dfecfb;
}

.clipboard-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.1)
}
</style>
